<template>
  <div class="login-cap">创建新企业</div>
  <!-- <div class="login-sub-title">{{ !isSso && !ssoLoading ? t('sys.login.subTitle') : '' }}</div> -->
  <a-form class="enter-x" ref="formRef">
      <a-form-item name="account" class="enter-x">
        <!-- <Input size="large" v-model:value="formData.account" :placeholder="t('sys.login.username')" class="fix-auto-fill" @blur="onAccountChange" /> -->
        <a-input >
          <template #addonBefore>
            <a-select v-model:value="value3" style="width: 90px">
              <a-select-option value="+86">+86</a-select-option>
            </a-select>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="password" class="enter-x">
        <!-- <InputPassword size="large" v-model:value="formData.password" :placeholder="t('sys.login.password')" /> -->
        <a-space>
          <a-input placeholder="input password" />
          <a-button >获取验证码</a-button>
        </a-space>
      </a-form-item>
      <a-form-item name="code" class="enter-x">
        <a-row type="flex" justify="space-between">
          <a-col class="sms-input">
            <a-input :placeholder="t('sys.login.codeTip')" name="code" size="large" />
          </a-col>
          <a-col class="sms-right">
            <a-tooltip :content="$t('sys.login.changeCode')" placement="bottom">
              <img class="codeImg" :alt="$t('sys.login.changeCode')" :src="apiUrl + codeImgUrl" @click="handleChangeImg" />
            </a-tooltip>
          </a-col>
        </a-row>
      </a-form-item>
      <div class="pt-10px">
        <a-form-item class="enter-x">
          <a-button type="primary" size="large" block >
            下一步
          </a-button>
        </a-form-item>
      </div>
    </a-form>
    <div class="single-form-footer-actions flex">
          <Space class="mr-auto">或 <router-link to="/login">登录企业</router-link></Space>
        </div>
    <div class="login-cap">企业用户享10人以下永久免费</div>
  <div class="login-sub-title">专业顾问一对一服务</div>
  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
  <a-form-item label="Resources" name="resource">
      <a-radio-group v-model:value="formState.resource">
        <a-radio value="1">企业注册</a-radio>
        <a-radio value="2">个人注册</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item ref="name" label="姓名" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>
    <a-form-item ref="name" label="密码" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>
    <a-form-item ref="name" label="企业名称" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>
    <a-form-item ref="name" label="邮箱" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>
    <a-form-item ref="name" label="" name="name">
      <a-checkbox v-model:checked="formState.checked">我已阅读并同意<span>《轻析视界服务条款》</span></a-checkbox>
    </a-form-item>
    <a-form-item >
      <a-button type="primary" @click="">进入轻析视界</a-button>
    </a-form-item>
  </a-form>
  <div><span>*注册成功，立即获得15天旗舰版免费试用！</span></div>
</template>
<script lang="ts" setup>
import { reactive, ref, toRaw } from 'vue';
import type { UnwrapRef } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import { useI18n } from '/@/hooks/web/useI18n';
interface FormState {
  resource: string;
  username: string;
  password: string;
  organName: string ;
  EMail: string | undefined;
  termsCheck: boolean;
}
const { t } = useI18n();
const formRef = ref();
const labelCol = { span: 5 };
const wrapperCol = { span: 13 };
const formState: UnwrapRef<FormState> = reactive({
  resource: '1',
  username: '',
  password: '',
  organName: '',
  EMail: '',
  termsCheck: false
});

const rules: Record<string, Rule[]> = {
  username: [
    { required: true, message: 'Please input Activity name', trigger: 'change' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
}

const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState, toRaw(formState));
    })
    .catch(error => {
      console.log('error', error);
    });
}
</script>